"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowLeft,
  Search,
  Plus,
  Users,
  Calendar,
  MessageSquare,
  Heart,
  Share2,
  MapPin,
  TrendingUp,
  UserPlus,
  Send,
} from "lucide-react"

export default function CommunityPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [showPostForm, setShowPostForm] = useState(false)
  const [newPost, setNewPost] = useState("")

  // 模拟社区数据
  const posts = [
    {
      id: 1,
      user: "创业老王",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "2小时前",
      content: "刚完成了A轮融资，感谢团队的努力！想和大家分享一些融资过程中的经验和教训。",
      images: [],
      likes: 45,
      comments: 12,
      shares: 8,
      tags: ["融资经验", "A轮"],
      hot: true,
    },
    {
      id: 2,
      user: "产品小美",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "4小时前",
      content: "做产品这么多年，发现用户调研真的太重要了。今天分享几个实用的用户调研方法，希望对大家有帮助。",
      images: ["/placeholder.svg?height=200&width=300"],
      likes: 32,
      comments: 18,
      shares: 5,
      tags: ["产品经验", "用户调研"],
      hot: false,
    },
    {
      id: 3,
      user: "技术大牛",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "6小时前",
      content: "最近在研究AI大模型的应用，有没有同行一起交流的？可以建个技术群。",
      images: [],
      likes: 28,
      comments: 25,
      shares: 3,
      tags: ["技术交流", "AI"],
      hot: false,
    },
  ]

  const events = [
    {
      id: 1,
      title: "创业者线下聚会",
      date: "2024-01-20",
      time: "19:00-21:00",
      location: "上海市浦东新区",
      attendees: 45,
      maxAttendees: 50,
      organizer: "上海创业联盟",
      description: "本次聚会将邀请多位成功创业者分享经验，同时提供networking机会。",
      tags: ["线下聚会", "经验分享"],
      status: "报名中",
    },
    {
      id: 2,
      title: "AI创业专题分享",
      date: "2024-01-22",
      time: "14:00-16:00",
      location: "线上直播",
      attendees: 234,
      maxAttendees: 500,
      organizer: "AI创业社区",
      description: "邀请AI领域的创业者和投资人，分享AI创业的机会和挑战。",
      tags: ["AI创业", "线上分享"],
      status: "报名中",
    },
    {
      id: 3,
      title: "投资人见面会",
      date: "2024-01-25",
      time: "15:00-17:00",
      location: "北京市朝阳区",
      attendees: 28,
      maxAttendees: 30,
      organizer: "创投圈",
      description: "知名投资机构合伙人现场点评项目，提供融资指导。",
      tags: ["投资人", "项目路演"],
      status: "即将开始",
    },
  ]

  const groups = [
    {
      id: 1,
      name: "AI创业交流群",
      members: 1234,
      description: "专注AI领域的创业交流，分享技术和商业经验",
      avatar: "/placeholder.svg?height=60&width=60",
      tags: ["AI", "技术创业"],
      activity: "活跃",
      isJoined: false,
    },
    {
      id: 2,
      name: "电商运营实战群",
      members: 856,
      description: "电商运营干货分享，从选品到营销全链路经验",
      avatar: "/placeholder.svg?height=60&width=60",
      tags: ["电商", "运营"],
      activity: "活跃",
      isJoined: true,
    },
    {
      id: 3,
      name: "融资路演练习群",
      members: 567,
      description: "为创业者提供路演练习机会，投资人在线点评",
      avatar: "/placeholder.svg?height=60&width=60",
      tags: ["融资", "路演"],
      activity: "一般",
      isJoined: false,
    },
  ]

  const handleLike = (postId) => {
    console.log("点赞帖子:", postId)
  }

  const handleComment = (postId) => {
    console.log("评论帖子:", postId)
  }

  const handleShare = (postId) => {
    console.log("分享帖子:", postId)
  }

  const handleJoinEvent = (eventId) => {
    console.log("报名活动:", eventId)
  }

  const handleJoinGroup = (groupId) => {
    console.log("加入群组:", groupId)
  }

  const handlePublishPost = () => {
    if (newPost.trim()) {
      console.log("发布帖子:", newPost)
      setNewPost("")
      setShowPostForm(false)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" onClick={() => router.back()}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回
              </Button>
              <div className="flex items-center space-x-2">
                <Users className="w-6 h-6 text-blue-600" />
                <h1 className="text-xl font-bold text-slate-900">创业者社区</h1>
              </div>
            </div>
            <Button onClick={() => setShowPostForm(true)}>
              <Plus className="w-4 h-4 mr-2" />
              发布动态
            </Button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        <Tabs defaultValue="posts" className="space-y-6">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="posts">社区动态</TabsTrigger>
            <TabsTrigger value="events">活动</TabsTrigger>
            <TabsTrigger value="groups">群组</TabsTrigger>
          </TabsList>

          {/* 社区动态 */}
          <TabsContent value="posts" className="space-y-6">
            <div className="flex gap-4 mb-6">
              <div className="flex-1">
                <div className="relative">
                  <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                  <Input
                    placeholder="搜索动态..."
                    className="pl-10"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* 主要内容 */}
              <div className="lg:col-span-2 space-y-6">
                {posts.map((post) => (
                  <Card key={post.id} className="hover:shadow-md transition-shadow">
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <img
                          src={post.avatar || "/placeholder.svg"}
                          alt={post.user}
                          className="w-10 h-10 rounded-full"
                        />
                        <div className="flex-1">
                          <div className="flex items-center space-x-2 mb-2">
                            <span className="font-medium text-slate-900">{post.user}</span>
                            <span className="text-sm text-slate-500">{post.time}</span>
                            {post.hot && (
                              <Badge className="bg-red-100 text-red-700">
                                <TrendingUp className="w-3 h-3 mr-1" />
                                热门
                              </Badge>
                            )}
                          </div>
                          <p className="text-slate-700 mb-3">{post.content}</p>
                          {post.images.length > 0 && (
                            <div className="mb-3">
                              <img
                                src={post.images[0] || "/placeholder.svg"}
                                alt="Post image"
                                className="rounded-lg max-w-full h-auto"
                              />
                            </div>
                          )}
                          <div className="flex flex-wrap gap-1 mb-3">
                            {post.tags.map((tag, index) => (
                              <Badge key={index} variant="outline" className="text-xs">
                                #{tag}
                              </Badge>
                            ))}
                          </div>
                          <div className="flex items-center space-x-4">
                            <Button variant="ghost" size="sm" onClick={() => handleLike(post.id)}>
                              <Heart className="w-4 h-4 mr-1" />
                              {post.likes}
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => handleComment(post.id)}>
                              <MessageSquare className="w-4 h-4 mr-1" />
                              {post.comments}
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => handleShare(post.id)}>
                              <Share2 className="w-4 h-4 mr-1" />
                              {post.shares}
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {/* 侧边栏 */}
              <div className="space-y-6">
                {/* 热门话题 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">热门话题</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {["#AI创业", "#融资经验", "#产品设计", "#团队管理", "#市场营销"].map((topic, index) => (
                        <div key={index} className="flex items-center justify-between">
                          <span className="text-sm text-slate-700">{topic}</span>
                          <Badge variant="outline" className="text-xs">
                            {Math.floor(Math.random() * 1000) + 100}
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* 推荐关注 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">推荐关注</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {[
                        { name: "投资人李总", desc: "知名天使投资人", followers: "10.2K" },
                        { name: "产品专家王老师", desc: "前阿里产品总监", followers: "8.5K" },
                        { name: "创业导师张总", desc: "连续创业者", followers: "6.8K" },
                      ].map((user, index) => (
                        <div key={index} className="flex items-center justify-between">
                          <div className="flex items-center space-x-3">
                            <img
                              src="/placeholder.svg?height=32&width=32"
                              alt={user.name}
                              className="w-8 h-8 rounded-full"
                            />
                            <div>
                              <div className="font-medium text-sm">{user.name}</div>
                              <div className="text-xs text-slate-500">{user.desc}</div>
                            </div>
                          </div>
                          <Button size="sm" variant="outline">
                            <UserPlus className="w-3 h-3 mr-1" />
                            关注
                          </Button>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

          {/* 活动 */}
          <TabsContent value="events" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {events.map((event) => (
                <Card key={event.id} className="hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between mb-3">
                      <Badge
                        className={
                          event.status === "报名中" ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700"
                        }
                      >
                        {event.status}
                      </Badge>
                      <div className="text-sm text-slate-500">
                        {event.attendees}/{event.maxAttendees}人
                      </div>
                    </div>
                    <h3 className="font-semibold text-slate-900 mb-2">{event.title}</h3>
                    <p className="text-sm text-slate-600 mb-4 line-clamp-2">{event.description}</p>
                    <div className="space-y-2 mb-4">
                      <div className="flex items-center space-x-2 text-sm text-slate-600">
                        <Calendar className="w-4 h-4" />
                        <span>
                          {event.date} {event.time}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2 text-sm text-slate-600">
                        <MapPin className="w-4 h-4" />
                        <span>{event.location}</span>
                      </div>
                      <div className="flex items-center space-x-2 text-sm text-slate-600">
                        <Users className="w-4 h-4" />
                        <span>主办方：{event.organizer}</span>
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-1 mb-4">
                      {event.tags.map((tag, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                    <Button
                      className="w-full"
                      onClick={() => handleJoinEvent(event.id)}
                      disabled={event.attendees >= event.maxAttendees}
                    >
                      {event.attendees >= event.maxAttendees ? "已满员" : "立即报名"}
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* 群组 */}
          <TabsContent value="groups" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {groups.map((group) => (
                <Card key={group.id} className="hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-start space-x-4 mb-4">
                      <img src={group.avatar || "/placeholder.svg"} alt={group.name} className="w-12 h-12 rounded-lg" />
                      <div className="flex-1">
                        <h3 className="font-semibold text-slate-900 mb-1">{group.name}</h3>
                        <div className="flex items-center space-x-2 text-sm text-slate-600">
                          <Users className="w-4 h-4" />
                          <span>{group.members} 成员</span>
                          <Badge
                            variant="outline"
                            className={`text-xs ${group.activity === "活跃" ? "text-green-600" : "text-yellow-600"}`}
                          >
                            {group.activity}
                          </Badge>
                        </div>
                      </div>
                    </div>
                    <p className="text-sm text-slate-600 mb-4 line-clamp-2">{group.description}</p>
                    <div className="flex flex-wrap gap-1 mb-4">
                      {group.tags.map((tag, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                    <Button
                      className="w-full"
                      variant={group.isJoined ? "outline" : "default"}
                      onClick={() => handleJoinGroup(group.id)}
                    >
                      {group.isJoined ? "已加入" : "加入群组"}
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </main>

      {/* 发布动态弹窗 */}
      {showPostForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-md">
            <CardHeader>
              <CardTitle>发布动态</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Textarea
                placeholder="分享你的想法..."
                value={newPost}
                onChange={(e) => setNewPost(e.target.value)}
                rows={4}
              />
              <div className="flex space-x-2 pt-4">
                <Button className="flex-1" onClick={handlePublishPost} disabled={!newPost.trim()}>
                  <Send className="w-4 h-4 mr-2" />
                  发布
                </Button>
                <Button variant="outline" onClick={() => setShowPostForm(false)}>
                  取消
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
